﻿var ch;  //窗体可视高度
var sh;  //窗体总高度
var st;  //滚动条位置，从0开始
var p = 1;  //表示第一页
var isloaded = false;  //表示是否加载成功
var music = new Audio(); //表示全局音乐播放器
//歌词API
//http://m.kugou.com/app/i/krc.php?cmd=100&hash=59eec98e433a77ab5a85167dede645ca&timelength=3434

//1.网页加载成功后，给搜索按钮赋事件
window.onload = function(){
  ch = document.documentElement.clientHeight;
  sh = document.documentElement.scrollHeight;
  st = document.documentElement.scrollTop; 
  sousuo.onclick = function(){ 
    loaddata(true);
  };
  $("#shuru").focus(function(){
    $("#sousuo").css("background-color","#00b2a4").css("color","white");
    $("#shuru").val("");
  });
  $("#sousuo").click(function(){
    $("#sousuo").css("background-color","#e5e5e5").css("color","#959595");
    
  });
};

//2.当网页滚动时，触发事件
window.onscroll = function(){
  if(isloaded){
    st = document.body.scrollTop||document.documentElement.scrollTop;
    sh = document.body.scrollHeight||document.documentElement.scrollHeight;
    //debug.innerHTML = st+" "+ch+" "+sh; 
    //滚动条到底了
    if(st+ch==sh+109){  
      $("#ploading").show();
      p++;
    //为了降低服务器压力，延迟2秒执行请求
      setTimeout(loaddata,2000);
    }
  }
};

//3.加载远程数据函数
//qingkong参数，传递true则表示要清空musiclist层的内容；
//不传或传递false，表示不清空
function loaddata(qingkong){
 //下面的函数是jquery的ajax函数，专门用来发送Ajax请求
 //这个函数有两个重要参数
 //1.是请求地址，该地址是一个跨域地址，在该地址中我们使用
 //callback=getdata来指明获取数据后前端用什么函数来接受服务
 //发送过来的数据
 //2.是dataType:jsonp,这个是指明实现跨域请求
 if(qingkong){
    $("#musiclist").empty();
 }

 var musicurl = "http://mobilecdn.kugou.com/api/v3/search/song?format=jsonp&keyword="+$("#shuru").val()+"&page="+p+"&pagesize=20&showtype=1";

 $.ajax({
   url: musicurl,
   dataType: 'jsonp',
   success:function(data){
     getdata(data);
   }
 });

}

//4.这个函数用来处理服务发送过来的数据
function getdata(data){
  for (var i = 0; i < data.data.info.length; i++) {
    var m = data.data.info[i];
    console.log(m);
    //创建一个jquery对象
    var $mdiv = $("<div class=\"music\"></div>");
    //给这个对象设置新的属性hash,可以用它来获取音乐地址
    $mdiv.attr("hash",m.hash);
    //给该元素设置内容
    var $filename = $("<div class=\"filename\">"+m.filename+"</div>");
    var $download = $("<a class=\"download\" href=\"\" download=\""+m.filename+"\"><img src=\"images/download.png\" /></a>");
    $mdiv.append($filename);
    $mdiv.append($download);

    getsonginfo($mdiv);

    //给该元素附加单击事件
    $filename.click(function(){
    //当单击歌曲名称时，发起第二个ajax请求，获取音乐地址
      music.src = $(this).parent().find("a").attr("href");
      music.play();
      $("#cbtn").attr('src',"images/暂停.png"); 
      $("#bottombar").show();
      $("#geming").text($(this).html());
    });
    $("#musiclist").append($mdiv);
   }     
   isloaded = true;
   $("#loading").hide();
   $("#cbtn").click(function(){
    if (music.paused){ 
      music.play(); 
      
      $(this).attr('src',"images/暂停.png"); 
  } 
  else{ 
      music.pause(); 
      $(this).attr('src',"images/播放.png");  
  }
  });
  $("#nbtn").click(function(){
    music.play(); 
    
  });
}

//5.获得音乐地址并播放
function getsonginfo($musicdiv){
   var songurl = "http://m.kugou.com/app/i/getSongInfo.php?hash="+$musicdiv.attr("hash")+"&cmd=playInfo&format=jsonp";
   var finalurl;
   $.ajax({
        url: songurl,
        dataType: 'jsonp',
        success:function(data){
          finalurl = getsongurl(data);
          $musicdiv.find("a").attr("href",finalurl);
        }
        
   });
}
//6.播放音乐
function getsongurl(data){
   return data.url;
   
}
